Absolute And Relative References

Introduction.

This topic discusses the advantages and disadvantages of relative and absolute referencing (or linking) and also explains the different HTML syntax behind each method.

How to Insert Media into your Webpage

There are two ways of including media (i.e. pictures, sound, etc.) into documents. Some documents, like MS WORD documents, actually store the media inside the document whereas others (such as HTML documents) just point to external media files.

There are advantages and disadvantages of both methods and they will be discussed later. This tutorial will explain how HTML files point to their associated media files (or even other HTML files) and the different methods you can use to point to these files.

Advantages and Disadvantages of Storing Files Externally to a Document

Advantages

Different documents can access the same media files. This saves disk space (and download times).
If you change a document, you only have to ship the changed text file (and not all the related media files). If the files are stored inside the document, the whole document has to be re-shipped.

Disadvantages

You don't always know what files are associated with your document. Whereas with WORD, if you copy a document to a floppy, you can be sure that you have also copied any pictures in your document to the disk as well. If you copy a HTML document to a floppy, you have to be careful to include any related media files.

How Files are Referenced in HTML

Basically, you need to tell the browser where the media files for the HTML documents are stored. HotDog will do this automatically for you. For example, if you insert a picture called elise.gif into your webpage, this file must be referenced in some way within the webpage because the image is stored externally.

There are 2 different ways of referencing external files from a HTML file: absolutely and relatively.

Absolute References

Here is an example of the HTML code for inserting an image using an absolute reference:

The HTML code above can be thought of as:

<image source = location> where the location is the absolute position of your file (written in a UNIX format).

The location, file:///C|/Program Files/HotDog6/HTMLfiles/graphics/elise.gif, when broken down and translated reveals file:// is just like http://. It just tells the browser to read a file on the local computer and not start browsing the Internet.

/C|/Program Files/HotDog6/HTMLfiles/graphics/elise.gif

is the UNIX translation for:

C:\Program Files\HotDog6\HTMLfiles\graphics\elise.gif

This is just the specific location of the picture.

As you can see, the image's position is located on your local hard drive (your own computer). This means, if you preview your HTML file anywhere on your computer, the image will be found. The only problem is that when you upload your HTML file to your server, the directory path C:/Program Files/HotDog6/HTMLfiles/graphics/elise.gif will not exist and so the image will not be displayed.

Relative References

In order to solve the problem above, relative referencing is used.

Here is an example of the HTML code for inserting an image using a relative reference.

You can think of this relative reference in a HTML file as a command: "Insert the picture elise.gif, which is in a directory called graphics, below the current directory."

In this case, when loading your HTML file, the browser will look for your images in a directory below your current directory called graphics. This means that your images will be displayed when you upload your files to the server, provided you store all your images in a directory under your HTML file called graphics. You can store all images and graphics in the same directory, but this will get messy if you create a large website.

NOTE

You will notice that the direction of the slashes is different in Windows95 and UNIX. You can configure HotDog to take care of this automatically when you upload your files to the Net:

In the Edit menu, select Preferences.

In your Hotdog menu go to

Select Publishing on the tree view of the WebSite Preferences dialog.

Tick the Replace '\' with '/' in filenames checkbox.

Tricks

The whole process of referencing files correctly is simple if you mirror the directory structures. If you are uploading a Website, HotDog does this automatically for you.

For instance, if your directory structure on your local hard drive is as shown in the following image:

Graphics/00000067.gif The current directory is called HTMLFiles. The directory HTMLFiles has child directories called audio, graphics, other and a parent directory called HotDog6. If you store all your HTML files in the HTMLFiles directory and all your media in the associated media directories then, when you upload all your work, the referencing will still be correct. This is provided the same directory structure exists on your server.

Say the directory structure of your server is:

Graphics/00000068.gif The children directories of www are exactly the same as the directory structure on your local hard drive. This is what is meant by the term mirroring. In this case, your HTML directory structure is mirrored. To demonstrate this, below are correctly referenced images. In each case the image elise.gif is stored in the graphics sub-directory of the HTML directory. On the local computer, the HTML file is stored in the HTMLFiles directory on the server. The HTML file is stored in the www directory.

The correct HTML code to insert the picture elise.gif on the local computer is:

The correct HTML code to insert the picture elise.gif on the server is:

The references are the same because we designed the directory structure to be that way. Of course it doesn’t matter what the parent directory is above your HTML directory, this is the key advantage of relative addressing over absolute addressing.

TIP

Whenever you create a new document, save it immediately into the default HTML Document Directory. This ensures that HotDog can use relative references because it knows the position of your HTML file.

Examples

Graphics/00000069.gif Using the picture to the left as your directory structure, answer the following questions:

Q1. What is the parent directory of graphics?

Q2. What are the children directories of HotDog6?

Q3. If I create a link to a file called giants.wav in the audio directory from a HTML file in the HTMLFiles directory, what would the path be?

Q4. If I create a link to the file elise.gif in the graphics directory from an HTML file in the HotDog6 directory, what would the path be?

Q5. If I create a link to the file peter.txt in the Textfiles directory from a HTML file in the HTMLFiles directory, what would the path be? (Note, use ... to mean go up one directory.)

Answers:

Q1. HTMLFiles.

Q2. downloads, HTMLfiles, text files.

Q3. "audio/giants.wav".

Q4. "HTMLfiles/graphics/elise.gif".

Q5. "../text files/peter.txt".